<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<style type="text/css">
			@font-face {
			  font-family: 'iconfont';
			  src: url('iconfont.eot');
			  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
			      url('iconfont.woff2') format('woff2'),
			      url('iconfont.woff') format('woff'),
			      url('iconfont.ttf') format('truetype'),
			      url('iconfont.svg#iconfont') format('svg');
			}
			.iconfont{
			    font-family: "iconfont" !important;
				font-size: 26px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			    display: inline-block;
			    width: 50px;
				height: 50px;
				background-color: #F1F2F3;
				border-radius: 50%;
				text-align: center;
				line-height: 50px;
				color: #aaa;
		    }
			#cancel,#search{
				line-height: 36px;
				margin: 10px;
				line-height: 36px;
				font-size: 16px;
			}
			i{
				display: inline-block;
				width: 10px;
			}
			.search-inp {
				display: inline-block;
				width: 83%;
				background-color: #f1f2f3;
				height: 40px;
				padding-left: 10px;
			}
			
			.search-text {
				border: 0;
				background-color: rgba(255, 255, 255, 0);
				font-size: 14px;
				width: 78%;
			}
			
			.mui-icon-search{
				font-size: 20px;
				line-height: 40px;
			}
			.line{
				margin-top: 10px;
				margin-left: 10px;
				padding: 10px;
				font-size: 14px;
				color: #ccc;
			}
			.icon-list{
				display: inline-block;
				margin: 0 5px;	
				width: 60px;
				color: #ccc;
				font-size: 12px;
				text-align: center;
			}
			#content-header span{
				margin: 0 5px;
				font-size: 14px;
				font-weight: 100;
				padding-bottom: 10px;
			}
			.note-list,.folder-list{
				padding: 18px 0 0;
				border-bottom: solid 1px #eee;
				flex-flow: column;
			}
			.cut-off-rule{
				border-bottom: 1px solid #eee;
				width: 106%;
				margin: 5px -10px;
			}
			.label-list{
				background-color: #F1F2F3;
				padding: 5px;
				display: inline-block;
			}
			.note-content{
				margin-top: 4px;
				overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 2;
			    -webkit-box-orient: vertical;
			}
			.starImg>img{
				float: right;
				margin-right: 20px;
				width: 20px;
			}
			.summary{
				height: 21px;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
			}
			.title-weight {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			.title {
				margin: 5px 0px 0px 0px;
				color: #6d6d72;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<!--输入框-->
		<div>
			<span class="search-inp">
				<span class="mui-icon mui-icon-search"></span>
				<input placeholder='在"加星文件"中搜索' class="search-text" />
				<span class="mui-icon mui-icon-closeempty" id="clean"></span>
			</span>
			<a href="javascript:;" id="cancel">取消</a>
			<a href="javascript:;" id="search" style="display: none;">搜索</a>
		</div>

		
		<!--查询内容-->
		<div id="content" style="display: none;">
			<!--分割线-->
			<div class="cut-off-rule"></div>
			<!--搜索条数-->
			<div style="text-align: left;font-size: 12px;color: #ccc;margin: 14px 10px;">
				共{{count}}条搜索结果
			</div>
			<!--分割线-->
			<div class="cut-off-rule"></div>
			<!--加星笔记显示区域-->
			<div>
				<!--加星笔记-->
				<div class="note-list note_name" v-for="note in noteList" @click="turnPage(note.id)">
					<label class="inp-label">
						<span class="title-weight">{{note.notesName}}</span>
						<span class="starImg"><img src="img/star.png"></span>
						<div class="note-content summary"><p class="title" v-html="note.content">{{note.content}}</p></div>
						<p class="title">{{note.updateTime}}</p>
					</label>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				//返回父页面刷新
				beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
					//refresh是父页面自定义事件
					mui.fire(list, 'refresh');
					//返回true,继续页面关闭逻辑
					return true;
				}
			});
			var userid;
			mui.plusReady(function() {
				//设置状态栏的背景颜色
				plus.navigator.setStatusBarBackground('#fff');
				//设置系统状态栏样式 (可选值:dark,light,UIStatusBarStyleDefault,UIStatusBarStyleBlackOpaque)
				plus.navigator.setStatusBarStyle('dark');
				//获取Token
				userid = plus.storage.getItem("accessToken")
			});
			$(function(){
				var vue = new Vue({
					el:"#content",
					data:{
						count:0,
						noteList:null,
					},
					methods:{
						turnPage:function(d){
							mui.openWindow({
							url: 'show_note.html',
							id: 'show_note',
							//传递的参数
							extras: {
							ids: d,
							}
					})
						}
					}
				})
				//清空输入框
				$("#clean").click(function(){
					$(".search-text").val("");
					hidden();
				})
				//输入框值改变时
				$(".search-text").bind("input propertychange",function(){
					var a = $(".search-text").val().replace(/ /g,"")
					if(a.length>0){
						//当输入框有值时
						show();
						getNotes();
					}else{
						hidden();					}
				})
				//搜索
				$("#search").click(function(){
					getNotes();
				})
				//取消
				$("#cancel").click(function(){
					mui.back();
				})
				//发送请求
				function getNotes(){
					//获取笔记的集合
					$.ajax("http://338de254.cpolar.io/note-star/notes/getStarNotes",{
						data:{
							token: userid,
							userId: userid,
							notesName:$(".search-text").val()
						},
						dataType:'json',//服务器返回json格式数据
						type:'get',//HTTP请求类型
						success:function(data){
							vue.noteList = data;
							vue.count = data.length;
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							alert(type)
						}
					});
					
				}
				function show(){
					$("#icon-menu").hide();
					$("#content").show();
					$("#cancel").hide();
					$("#search").show();
				}
				function hidden(){
					$("#icon-menu").show();
					$("#content").hide();
					$("#cancel").show();
					$("#search").hide();
				}
			})
		</script>
	</body>

</html>